<template>
  <div class="project">
    <el-button type="primary" @click="addProject">新增项目</el-button>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        v-for="item in projectType"
        :key="item"
        :name="item.value"
      >
        <el-table :data="projectList" style="width: 100%">
          <el-table-column fixed prop="name" label="项目名称" width="150" />
          <el-table-column prop="repostory" label="仓库地址" width="200" />
          <el-table-column prop="type" label="项目类别" width="120" />
          <el-table-column prop="feName" label="前端开发" width="120" />
          <el-table-column prop="backendName" label="后端开发" width="100" />
          <el-table-column prop="pm" label="产品经理" width="120" />
          <el-table-column prop="projectDesc" label="项目描述" width="400" />
          <el-table-column prop="businessId" label="业务详情" width="120" />
          <el-table-column prop="testInfo" label="测试地址" width="220">
            <template #default="scope">
              {{ scope.row.testInfo.url }}
            </template>
          </el-table-column>
          <el-table-column prop="testInfo" label="测试账号密码" width="250">
            <template #default="scope">
              <p v-for="item in scope.row.testInfo.accounts" :key="item">
                账号:{{ item.user }} &nbsp; 密码:{{ item.pwd }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="testInfo" label="分支名称" width="120">
            <template #default="scope">
              {{ scope.row.testInfo.branch }}
            </template>
          </el-table-column>
          <el-table-column prop="testInfo" label="测试部署方式" width="120">
            <template #default="scope">
              {{ scope.row.testInfo.isJenkins === '0' ? 'FTP' : 'Jenkiens' }}
            </template>
          </el-table-column>
          <el-table-column prop="prodInfo" label="生产地址" width="220">
            <template #default="scope">
              {{ scope.row.prodInfo.url }}
            </template>
          </el-table-column>
          <el-table-column prop="prodInfo" label="生产账号密码" width="250">
            <template #default="scope">
              <p v-for="item in scope.row.prodInfo.accounts" :key="item">
                账号:{{ item.user }} &nbsp; 密码:{{ item.pwd }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="prodInfo" label="生产分支名称" width="120">
            <template #default="scope">
              {{ scope.row.prodInfo.branch }}
            </template>
          </el-table-column>
          <el-table-column prop="prodInfo" label="生产部署方式" width="120">
            <template #default="scope">
              {{ scope.row.prodInfo.isJenkins === '0' ? 'FTP' : 'Jenkiens' }}
            </template>
          </el-table-column>
          <el-table-column prop="testInfo" label="测试服务器ip" width="120">
            <template #default="scope">
              {{ scope.row.testInfo.serverInfo.ip }}
            </template>
          </el-table-column>
          <el-table-column
            prop="testInfo"
            label="测试服务器账号密码"
            width="220"
          >
            <template #default="scope">
              账号:{{ scope.row.testInfo.serverInfo.account }} &nbsp; 密码:{{
                scope.row.testInfo.serverInfo.pwd
              }}
            </template>
          </el-table-column>
          <el-table-column prop="prodInfo" label="生产服务器ip" width="120">
            <template #default="scope">
              {{ scope.row.prodInfo.serverInfo.ip }}
            </template>
          </el-table-column>
          <el-table-column
            prop="prodInfo"
            label="生产服务器账号密码"
            width="220"
          >
            <template #default="scope">
              账号:{{ scope.row.prodInfo.serverInfo.account }} &nbsp; 密码:{{
                scope.row.prodInfo.serverInfo.pwd
              }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="editProjectHandle(scope.row)"
                >修改</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="removeProjectHandle(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 添加弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title=""
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="150px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="仓库地址" prop="repostory">
          <el-input v-model="ruleForm.repostory" />
        </el-form-item>
        <el-form-item label="项目类别" prop="type">
          <el-select-v2
            v-model="ruleForm.type"
            placeholder="选择项目类别"
            :options="projectType"
          />
        </el-form-item>
        <el-form-item label="前端开发" prop="feName">
          <el-select-v2
            v-model="ruleForm.feName"
            placeholder="前端开发"
            :options="fes"
            :value-key="ruleForm.feName"
          />
        </el-form-item>
        <el-form-item label="后端开发" prop="backendName">
          <el-input v-model="ruleForm.backendName" />
        </el-form-item>
        <el-form-item label="产品经理" prop="pm">
          <el-input v-model="ruleForm.pm" />
        </el-form-item>
        <el-form-item label="项目描述" prop="projectDesc">
          <el-input
            v-model="ruleForm.projectDesc"
            placeholder="请务必写清楚改项目基本业务概述，以便于共同维护"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="业务详情链接">
          <el-input v-model="ruleForm.businessId" />
        </el-form-item>
        <el-form-item label="测试地址">
          <el-input v-model="ruleForm.testInfo.url" />
        </el-form-item>
        <el-form-item label="测试账号">
          <el-row
            :gutter="20"
            v-for="(item, index) in ruleForm.testInfo.accounts"
            :key="item"
          >
            <el-col :span="10">
              <el-input v-model="item.user">
                <template #prepend>账号</template>
              </el-input>
            </el-col>
            <el-col :span="10">
              <el-input v-model="item.pwd">
                <template #prepend>密码</template>
              </el-input>
            </el-col>
            <el-col :span="4">
              <Icon
                v-if="index < ruleForm.testInfo.accounts.length - 1"
                icon="jianqujianhaowubiankuang"
                @iconClick="removeTestAccount('test', index)"
              />

              <Icon v-else icon="tianjia" @iconClick="addAccount('test')" />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="测试分支">
          <el-input v-model="ruleForm.testInfo.branch" />
        </el-form-item>
        <el-form-item label="自动部署">
          <el-radio-group v-model="ruleForm.testInfo.isJenkins">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生产地址">
          <el-input v-model="ruleForm.prodInfo.url" />
        </el-form-item>
        <el-form-item label="生产测试账号">
          <el-row
            :gutter="20"
            v-for="(item, index) in ruleForm.prodInfo.accounts"
            :key="item"
          >
            <el-col :span="10">
              <el-input v-model="item.user">
                <template #prepend>账号</template>
              </el-input>
            </el-col>
            <el-col :span="10">
              <el-input v-model="item.pwd">
                <template #prepend>密码</template>
              </el-input>
            </el-col>
            <el-col :span="4">
              <Icon
                v-if="index < ruleForm.prodInfo.accounts.length - 1"
                icon="jianqujianhaowubiankuang"
                @iconClick="removeTestAccount('prod', index)"
              />
              <Icon v-else icon="tianjia" @iconClick="addAccount('prod')" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="生产分支">
          <el-input v-model="ruleForm.prodInfo.branch" />
        </el-form-item>
        <el-form-item label="自动部署">
          <el-radio-group v-model="ruleForm.prodInfo.isJenkins">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="测试服务器IP">
          <el-input v-model="ruleForm.testInfo.serverInfo.ip" />
        </el-form-item>
        <el-form-item label="测试服务器账号">
          <el-input v-model="ruleForm.testInfo.serverInfo.account" />
        </el-form-item>
        <el-form-item label="测试服务器密码">
          <el-input v-model="ruleForm.testInfo.serverInfo.pwd" />
        </el-form-item>
        <el-form-item label="生产服务器IP">
          <el-input v-model="ruleForm.prodInfo.serverInfo.ip" />
        </el-form-item>
        <el-form-item label="生产服务器账号">
          <el-input v-model="ruleForm.prodInfo.serverInfo.account" />
        </el-form-item>
        <el-form-item label="生产服务器密码">
          <el-input v-model="ruleForm.prodInfo.serverInfo.pwd" />
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { projectType } from '@/utils/const/constant'
import api from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import storage from '@/utils/localStorage'
// tabs切换
const activeName = ref('ssi')
activeName.value = storage.localGetItem('projectTabActiveName')
  ? storage.localGetItem('projectTabActiveName')
  : 'ssi'
const projectList = ref([])
const projects = ref([])
const dialogVisible = ref(false)
const operationType = ref(false)
const handleClick = (tab, event) => {
  storage.localSetItem('projectTabActiveName', activeName.value)
  projectList.value = projects.value.filter((item) => {
    return item.type === activeName.value
  })
}

const getProjectList = () => {
  api.getProjectList().then((res) => {
    if (res.code === 200) {
      projectList.value = res.data
        .filter((item) => {
          return item.type === activeName.value
        })
        .reverse()
      projects.value = res.data.reverse()
    } else {
      // 查询失败
    }
  })
}
getProjectList()

// 添加测试账号
const addAccount = (type) => {
  console.log('添加账号', type)
  if (type === 'test') {
    // 生产
    ruleForm.value.testInfo.accounts = [
      ...ruleForm.value.testInfo.accounts,
      { user: '', pwd: '' }
    ]
  }
  if (type === 'prod') {
    // 测试
    ruleForm.value.prodInfo.accounts = [
      ...ruleForm.value.prodInfo.accounts,
      { user: '', pwd: '' }
    ]
  }
}
// 删除测试账号
const removeTestAccount = (type, index) => {
  console.log('删除账号', type, index)
  if (type === 'test') {
    // 生产
    ruleForm.value.testInfo.accounts = ruleForm.value.testInfo.accounts.filter(
      (item, i) => {
        return index !== i
      }
    )
  }
  if (type === 'prod') {
    // 测试
    ruleForm.value.prodInfo.accounts = ruleForm.value.prodInfo.accounts.filter(
      (item, i) => {
        return index !== i
      }
    )
  }
}
// dom
const ruleFormRef = ref(null)
// 字段
const ruleForm = ref({
  name: '',
  repostory: '',
  type: '',
  feId: '',
  feName: '',
  backendName: '',
  pm: '',
  projectDesc: '', // 项目描述
  businessId: '', // 业务描述URL
  testInfo: {
    url: '',
    accounts: [
      {
        user: '',
        pwd: ''
      }
    ],
    branch: '',
    isJenkins: '0',
    serverInfo: {
      ip: '',
      account: '',
      pwd: ''
    }
  },
  prodInfo: {
    url: '',
    accounts: [
      {
        user: '',
        pwd: ''
      }
    ],
    branch: '',
    isJenkins: '0',
    serverInfo: {
      ip: '',
      account: '',
      pwd: ''
    }
  },
  remark: '',
  state: 1
})
// 成员接口
const fes = [
  {
    value: 1001,
    label: '孙海亮'
  },
  {
    value: 1002,
    label: '杨利龙'
  },
  {
    value: 1003,
    label: '周留芳'
  },
  {
    value: 1004,
    label: '朱彩云'
  },
  {
    value: 1005,
    label: '吴婷慧'
  }
]
// 校验

const rules = {
  name: [
    {
      required: true,
      message: '请输入项目名称',
      trigger: 'blur'
    },
    { min: 2, message: '请输入完整项目名称', trigger: 'blur' }
  ],
  repostory: [
    {
      required: true,
      message: '请输入代码仓库地址',
      trigger: 'blur'
    },
    { min: 20, message: '请输入完整代码仓储抵制', trigger: 'blur' }
  ],
  type: [
    {
      required: true,
      message: '请选择项目归属类型',
      trigger: 'change'
    }
  ],
  feName: [
    {
      required: true,
      message: '选择前端项目负责人',
      trigger: 'change'
    }
  ],
  backendName: [
    {
      required: true,
      message: '请输入后端项目负责人名字',
      trigger: 'blur'
    },
    { min: 2, message: '请输入完整名字', trigger: 'blur' }
  ],
  pm: [
    {
      required: true,
      message: '请输入后端产品负责人名字',
      trigger: 'blur'
    },
    { min: 2, message: '请输入完整名字', trigger: 'blur' }
  ],
  projectDesc: [
    {
      required: true,
      message: '请输入该项目基本业务描述',
      trigger: 'blur'
    },
    {
      min: 30,
      message: '不低于30个字的言简意赅的描述，以便于共同维护',
      trigger: 'blur'
    }
  ]
}
const addProject = () => {
  // 打开form
  dialogVisible.value = true
  // 表单类型
  operationType.value = false
}
const editProjectHandle = (item) => {
  console.log('修改数据', item)
  ruleForm.value = item
  dialogVisible.value = true
  operationType.value = true
}
const removeProjectHandle = (item) => {
  ruleForm.value = item
  editProject('确定要删除项目？')
}
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm.value)
      // 添加
      if (operationType.value === false) {
        api.addProject(ruleForm.value).then((res) => {
          console.log('添加项目结果', res)
          if (res.code === 200) {
            getProjectList()
            ElMessage({
              message: res.msg,
              type: 'success'
            })
            // 更新数据
            // 关闭窗口
            dialogVisible.value = false
          } else {
            ElMessage({
              message: res.msg,
              type: 'error'
            })
          }
        })
      } else {
        // 修改
        editProject('确认修改项目信息？')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const editProject = (info) => {
  ElMessageBox.confirm(info).then(() => {
    if (info === '确定要删除项目？') {
      ruleForm.value.state = 0
    }
    api.editProject(ruleForm.value).then((res) => {
      console.log('修改结果', res)
      if (res.code === 200) {
        // 更新数据
        getProjectList()
        ElMessage({
          message: res.msg,
          type: 'success'
        })
        // 关闭窗口
        dialogVisible.value = false
      } else {
        ElMessage({
          message: res.msg,
          type: 'error'
        })
      }
    })
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}
</script>
<style lang="scss" scoped>
.demo-tabs {
  margin-top: 10px;
}
.el-form {
  height: 60vh;
  overflow-y: scroll;
  ::v-deep .svg-icon {
    font-size: 24px;
    position: relative;
    top: 0.5vh;
  }
}
::v-deep .el-input__validateIcon {
  position: relative;
  top: 8px;
  left: 6px;
}
</style>
